<template>
  <div class="index" v-loading="loading">
    <div class="mian">
        <div class="wrap">
            <div class="service-title">
              <h2>智慧政策</h2>
              <p>Smart policy</p>
            </div>
            <div class="mian-top flex-bett">
                <div class="li" @click="togNav('/policy/support')">
                    <div class="box"></div>
                    <p>政策直兑</p>
                </div>
                <div class="li" @click="togNav('/policy/radio?identity=g')">
                    <div class="box"></div>
                    <p>惠才政策匹配</p>
                </div>
                <div class="li" @click="togNav('/policy/radio?identity=q')">
                    <div class="box"></div>
                    <p>惠企政策匹配</p>
                </div>
            </div>
            <div class="search">
                <input type="text" name="search" v-model="req.keywords" placeholder="请输入您要寻的政策！" placeholder-class="searchp" />
                <div class="icon" @click="searchbind()"></div>
            </div>
            <!-- <div class="list flex-bett flex-wrap">
                <div class="li" v-for="(item,i) in list" :key="i" @click="togDetails(item.id)">
                    <div class="img" :style="{background: 'url('+item.imgUrl+') center no-repeat'}"></div>
                    <div class="info">
                        <div class="date">{{item.updateTime1}}</div>
                        <div class="title">{{item.title}}</div>
                        <div class="p">{{item.abstractDesc}}</div>
                    </div>
                </div>
            </div> -->
            <el-table :data="list" align='center' border stripe  style="width: 100%" @row-click = 'togDetails'>
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template slot-scope="scope">
                        <span>{{(req.page - 1) * req.limit + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column align='center' prop="title" label="标题" width="580"></el-table-column>
                <el-table-column align='center' prop="type" label="文件类型"  width="280"></el-table-column>
                <el-table-column align='center' prop="updateTime1" label="发文日期"></el-table-column>
            </el-table>
            <!-- <div class="page flex-jusa">
                <div class="a" @click="toPrev">上一页</div>
                <div class="a" :class="(i == zindex?'on':'')" v-for="(index,i) of thisPages" :key="i" @click="togpage(i,index)">{{index}}</div>
                <div class="a" @click="toNext">下一页</div>
            </div> -->
            <el-pagination
                background
                prev-text="上一页"
                next-text="下一页"
                layout="prev, pager, next"
                @current-change="curPage"
                :page-size="req.limit"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
  </div>
</template>
<script>
import {findAllList} from '@/api/service/service'
export default {
  name: "index",
  data() {
    return {
        img:"http://sznews.tetimes.com/uploads/allimg/201012/8-20101223340D02.png",
        req: {
            limit: 10,
            page: 1,
            keywords:""
        },
        total:0,
        list:[],                            //列表数据
        loading:false
    }
  },
  created(){
      this.findRecommendPolicyListApi()
  },
  mounted(){

  },
  methods:{
    togNav(e){
        this.$router.push(e)
    },
    curPage(e){
      this.req.page = e;
      this.findRecommendPolicyListApi()
    },
    findRecommendPolicyListApi(){
        this.loading =true;
        findAllList(this.req).then(res=>{
            this.loading =false;
            if(res.code === 0){
                for(let i=0; i<res.data.length; i++){
                    res.data[i].type = '政策文件'
                    res.data[i].updateTime1 = this.renderTime(res.data[i].createTime)
                }
                this.total = res.total;
                this.list = res.data;
            }
        })
    },
    renderTime(date) {
        var dateee = new Date(date)
        return dateee.getFullYear()+'年'+(dateee.getMonth()+1)+'月'+dateee.getDate()+'日'
    },
    togDetails(row){
        console.log(row);
        this.$router.push("/policy/details?id="+row.id)
    },
    searchbind(e){
        this.req.page=1;
        this.req.limit=6;
        this.findRecommendPolicyListApi()
    }

  }
}
</script>
<style scoped>
.mian{
    padding-bottom: 100px;
    background: #fff;
}
.service-title{
  padding: 45px 0;
  text-align: center;
  color: #5E9F8E;
}
.service-title h2{
  font-size: 36px;
  line-height: 52px;
}
.service-title p{
  font-size: 14px;
  line-height: 24px;
  text-transform:uppercase;
}
.wrap{
    width: 1200px;
    margin: auto;
}
.mian-top{
    padding: 0 60px;
}
.mian-top .li {
    padding: 0;
    cursor:pointer;
}
.mian-top .li .box{
    width: 188px;
    height: 188px;
    border-radius: 8px;
}
.mian-top .li:nth-child(1) .box{
    background:  url(../../assets/policy/policy1.png) center center no-repeat;
    background-size: 100%;
    /* background: linear-gradient(46deg, #D03E32, #FAA810);
    box-shadow: 1px 6px 12px 2px rgba(54, 65, 86, 0.2); */
}
.mian-top .li:nth-child(2) .box{
    background:  url(../../assets/policy/policy2.png) center center no-repeat;
    background-size: 100%;
    /* background: linear-gradient(46deg, #7C66E5, #C26CD8);
    box-shadow: 1px 6px 12px 2px rgba(54, 65, 86, 0.2); */
}
.mian-top .li:nth-child(3) .box{
    background:  url(../../assets/policy/policy3.png) center center no-repeat;
    background-size: 100%;
    /* background: linear-gradient(46deg, #3892F6, #66C6FE);
    box-shadow: 1px 6px 12px 2px rgba(54, 65, 86, 0.2); */
}
.mian-top .li p{
    display: block;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343434;
    line-height: 30px;
    padding: 10px 0 30px 0;
    text-align: center;
    margin: 0;
    padding: 10px 0 30px;
}
.search{
    width: 460px;
    display: block;
    height: 44px;
    border-radius: 22px;
    margin: 0 auto 36px;
    position: relative;
}
.search input{
    display: block;
    background: #FFFFFF;
    box-shadow: 1px 3px 15px 4px rgba(44, 112, 141, 0.18);
    width: calc(100%);
    padding-left: 40px;
    height: 44px;
    margin: 0 !important;
    border-radius: 22px;
    font-size: 14px;
}
.search .icon{
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background:  url(../../assets/policy/search.png) center center no-repeat;
    background-size: 100%;
    top: 0;
    right: 0;
    cursor:pointer
}
.list {
    position: relative;
}
.list::after{
    content: " ";
    width: 357px;
    height: 0;
}
.list .li{
    width: 357px;
    background: #FFFFFF;
    box-shadow: 1px 3px 15px 4px rgba(44, 112, 141, 0.18);
    margin-bottom: 50px;
    position: relative;
    cursor:pointer
}
.list .li .img{
    width: 100%;
    height:172px;
    background-size: cover !important;
    display: block;
}
.list .li .info{
    padding: 12px 20px;
}
.list .li .info .date{
    font-size: 15px;
    color: #3EABC4;
    line-height: 30px;
}
.list .li .info .title{
    font-size: 18px;
    color: #343434;
    line-height: 30px;
}
.list .li .info .p{
    font-size: 14px;
    line-height: 24px;
    color: #666666;
}
.list::after{
    content: " ";
    width: 357px;
    height: 0px;
}
.page{
    width: 100%;

    margin: auto;
    padding: 12px 0;
    text-align: center;
    position: relative;
}
.page::after{
    content: " ";
    border-top: 2px solid #eeeeee;
    position: absolute;
    width: 610px;
    top: 0;
    left: calc(50% - 305px);
}
.page .a{
    padding: 0 12px;
    margin: 0 4px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    color: #666;
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 4px;
}
.page .a.on{
    background: #BE475D;
    color: #fff;
}
.page input{
    width: 50px;
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    font-size: 14px;
    text-align: center;
}
input::-webkit-input-placeholder {
/* WebKit browsers */
color: #9A9A9A;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #9A9A9A;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #9A9A9A;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #9A9A9A;
}
</style>
